<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<base href="${path}/pages/">
<meta charset="UTF-8">
<title>${movie.movieName}</title>
<link rel="stylesheet" href="../layui/css/layui.css">

<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>

<style type="text/css">
  	a:link {
    	color: #37a;
    	text-decoration: none;
	}
	a:visited {
    	color: #669;
    	text-decoration: none;
	}
	a:hover {
    	visibility: visible;
	}
	h1{
		font-weight: bold;
    	color: #494949;
    	margin: 0;
    	padding: 0 0 15px 0;
    	line-height: 1.1;
    	font-size: 26px;
	}
	h1 .year{
		color: #888;
    	display: inline-block;
   		zoom: 1;
	}
 </style>

</head>
<body>
<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="${path}/action/user/index"><i class="layui-icon">&#xe68e;</i></a></li>
  <li class="layui-nav-item"><a href="${path}/action/user/index"><i class="layui-icon layui-icon-fire"></i> 影评天下</a></li>
  <li class="layui-nav-item" style="float:right" >
  	<a href="${path}/pages/register.jsp" id="register">注册</a>
  </li>
  <li class="layui-nav-item" style="float:right" >
    <a href="${path}/pages/login.jsp" id="login">登录</a>
  </li>
  <li class="layui-nav-item" style="float:right" >
  <a href="${path}/action/user/userCenter" id="user_center"></a>
  <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="${path}/action/user/logout">登出</a></dd>
   </dl>
  </li>
  <li> <input type="hidden" value="${user.flag }" id="flag"></li>
</ul>


<hr class="layui-bg-gray">
<div class="layui-container">

	<div class="layui-row1">
    	<h1><span>${movie.movieName}</span><span class="year" >（${ movie.releasetime.substring(0,4) }）</span></h1>
    </div>	
    
	<div class="layui-row1">
    	<div class="layui-col-md2">
    		<a class="nbgnbg" href="${path}/action/movie/movieInfo?id=${ movie.id }" title="点击看更多海报">
        		<img src="${ movie.moviePicture }" title="点击看更多海报" alt="无名之辈" style="max-width: 135px;">
   			</a>
    	</div>
   		<div class="layui-col-md10">
  			<div class="layui-row1">
        		<span><span class="pl">导演</span>:<a href="javascript:void(0)" rel="v:directedBy">${ movie.director }</a></span><br>
        		<span class="actor"><span class="pl">主演</span>:<span><a href="javascript:void(0);">${ movie.actors }</a></span></span><br>
        		<span class="pl">上映日期:</span> <span>${ movie.releasetime }</span><br>
				
			</div>
			<div class="layui-row1">
				
				<div style="margin:7px auto;float:left">
					<strong class="rating" style="color: #494949;padding: 0;min-width: 30%;font-size: 24px;font-style: normal;font-weight: normal;">${ movie.overallRating }</strong>
				</div>
				<div style="margin:10px 10px;float:left">
					<c:forEach begin="1" end="${ movie.overallRating/2 }" step="1"> 
						<img src="../img/star_onmouseover@2x.png" width="24" height="24">
					</c:forEach>
					<c:forEach begin="${ movie.overallRating/2 }" end="4" step="1"> 
						<img src="../img/star_hollow_hover@2x .png" width="24" height="24">
					</c:forEach>
				</div>
				
			</div>
			<div class="layui-row1">
				<div style="margin:10px 10px;float:left">
					<h2 style="color: #007722;margin-bottom: 12px;font-size: 16px;">
        				<i>${movie.movieName}的简介</i>
             			 · · · · · ·
    				</h2>
    				<span style="font-size: 13px;font: 12px Helvetica,Arial,sans-serif;line-height: 1.62;color: #111;    word-break: break-all;">
    					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${ movie.introduction }
    				</span>
				</div>
			</div>
			
   		</div>
   		
   		<hr class="layui-bg-gray">
   		
   		<div class="layui-row1">
   			
   			<a  class="layui-icon layui-icon-edit" href="${path}/action/review/reviewForm?movieId=${movie.id}">写影评</a><span>&nbsp;&nbsp;若看过此电影就留下你宝贵的评价吧。先到，鲜评论</span>
   			
   		</div>
   		
   		<hr class="layui-bg-gray">
   		
   		<div style="margin:0 auto; "  class="layui-row" id="col">
	
    		
    		
		</div>
   		
    </div>
</div>
</body>
    <script type="text/html" id="laytplContentReview">
{{#  layui.each(d, function(index, item){ }}
	<hr class="layui-bg-gray">
    <div class="layui-row grid-demo">
		
		<div class="layui-row-md1" style="color: #666; padding: 5px 0;">
                <a href="${path}/action/user/writerInfo?id={{ item.writer.id }}">{{ item.writer.userName }}</a> 评论
                <a href="${path}/action/movie/movieInfo?id={{ item.movie.id }}">{{ item.movie.movieName }}</a>
                <span class="rating" style="margin-left:16px">
					{{# for(var i=1; i<=item.rating; i++){ }} 
						<img src="../img/star_onmouseover.png" id="star${i}" width="16" height="16">
					{{# } }}
					{{# for(var i=1; i<=5-item.rating; i++){ }} 
						<img src="../img/star_hollow_hover.png" id="star${5-i}" width="16" height="16">
					{{# } }}                	

    			</span>
				<span style="margin-left:10px">{{ item.createTime }}</span>
        </div>
		<h3>
			<a style="color: #669;text-decoration: none;" href="${path}/action/review/findById?id={{ item.id }}" class="">{{ item.title }}</a>
		</h3>
        <div class="layui-row-md3">
			<span>
				{{ item.content.substring(0,150) }}
			</span>
            <a href="${path}/action/review/findById?id={{ item.id }}">...(全文)</a>
        </div>
	</div>
{{# })  }}
</script>
  
<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
  
    layui.use(['element','laypage','form','jquery','laytpl'],function(){
    	
      	var element = layui.element;
      	var laypage = layui.laypage;
      	var form = layui.form;
      	var laytpl = layui.laytpl;
      	var $ = layui.$;
      	
      	var flag=$('#flag').val();
      	var success=(flag=="");
      	if(success!=true){
              	 $("#user_center").html("个人中心");
              	 $("#login").html("");
              	 $("#register").html("");

          	}else{
          		$("#user_center").html("");
          	 	$("#login").html("登录");
          	 	$("#register").html("注册");
          	}
      	
      	laypage.render({
        	elem: 'demo',
        	count: 70
      	});
			
      	$.getJSON('${path}/action/review/findByMovieId', {movieId:"${movie.id}"}, function(data) {
			//alert(JSON.stringify(data));
			var tpl = $('#laytplContentReview').html();
			laytpl(tpl).render(data, function(html){
	      		$("#col").html (html);
	      	});
		});
   
    })   	
    
</script>


</html>